import React, {useEffect, useState} from 'react';
import {
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
  TextInput,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';

const ShopCar = () => {
  const navigation = useNavigation();
  useEffect(() => {
    navigation.setOptions({
      title: '购物车',
      headerRight: () => (
        <View style={styles.head_right}>
          <Text style={styles.edit}>编辑</Text>
        </View>
      ),
    });
  }, [navigation]);
  return (
    <AreaView>
      <ScrollView style={styles.container}>
        {[1, 2, 3, 4].map((item) => (
          <View style={styles.list}>
            <TouchableOpacity>
              <Image
                style={styles.checked_icon}
                source={require('../../assets/images/check.jpg')}
              />
            </TouchableOpacity>
            <View style={styles.couse_detail}>
              <View style={styles.couse_cover_box}>
                <Image style={styles.couse_cover} />
                <Image
                  style={styles.video_icon}
                  source={require('../../assets/images/video_stop.png')}
                />
              </View>
              <View style={styles.couse_detail_info}>
                <View style={styles.couse_detail_info_head}>
                  <Text style={styles.couse_name}>课程名称名称</Text>
                  <Text style={styles.couse_coupon}>优惠券</Text>
                </View>
                <Text style={styles.couse_time}>直播2课时 时长30分钟/次</Text>
                <Text numberOfLines={2} style={styles.couse_desc}>
                  <Text style={styles.couse_desc_title}>简介文字：</Text>
                  课程简介老师简介课程简介老师简介课程简介老师简介课程简介老师简介课程简介老师简介课程简介老师简介
                </Text>
                <View style={styles.money_num}>
                  <Text style={styles.couse_money}>￥2888</Text>
                  <View style={styles.num_btn}>
                    <TouchableOpacity  activeOpacity={1} style={styles.btn_box}>
                      <Image
                        style={styles.minus_icon}
                        source={require('../../assets/images/minus.png')}
                      />
                    </TouchableOpacity>
                    <View style={styles.num}>
                      <Text style={styles.num_text}>1</Text>
                    </View>
                    <TouchableOpacity  activeOpacity={1} style={styles.btn_box}>
                      <Image
                        style={styles.add_icon}
                        source={require('../../assets/images/add.png')}
                      />
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            </View>
          </View>
        ))}
      </ScrollView>
      <View style={styles.foot_btn}>
        <TouchableOpacity  activeOpacity={1} style={styles.checked_all}>
          <Image
            style={styles.checked_icon}
            source={require('../../assets/images/check.jpg')}
          />
          <Text style={styles.checked_all_text}>全选</Text>
        </TouchableOpacity>
        <TouchableOpacity  activeOpacity={1} style={styles.del_btn}>
          <Text style={styles.del_btn_text}>删除</Text>
        </TouchableOpacity>
      </View>
    </AreaView>
  );
};

export default ShopCar;
